{% extends "scheduling/base.html" %}
{% load static %}

{% block content %}
<div class="container mt-4">
    <div class="card">
        <div class="card-header bg-primary text-white">
            <h3 class="mb-0">
                <i class="fas fa-plus-circle me-2"></i>添加新车辆
            </h3>
        </div>
        <div class="card-body">
            <form method="post" class="needs-validation" novalidate>
                {% csrf_token %}

                <!-- 车牌号 -->
                <div class="mb-3">
                    <label for="id_bus_id" class="form-label">车牌号</label>
                    {{ form.bus_id }}
                    {% for error in form.bus_id.errors %}
                        <div class="invalid-feedback d-block">
                            {{ error }}
                        </div>
                    {% endfor %}
                    <div class="invalid-feedback">
                        请输入有效的车牌号，例如：粤A12345
                    </div>
                </div>

                <!-- 车型和核载人数 -->
                <div class="row">
                    <!-- 车型 -->
                    <div class="col-md-6 mb-3">
                        <label for="id_model" class="form-label">车型</label>
                        {{ form.model }}
                        {% for error in form.model.errors %}
                            <div class="invalid-feedback d-block">
                                {{ error }}
                            </div>
                        {% endfor %}
                        <div class="invalid-feedback">
                            请选择车型
                        </div>
                    </div>

                    <!-- 核载人数 -->
                    <div class="col-md-6 mb-3">
                        <label for="id_capacity" class="form-label">核载人数</label>
                        {{ form.capacity }}
                        {% for error in form.capacity.errors %}
                            <div class="invalid-feedback d-block">
                                {{ error }}
                            </div>
                        {% endfor %}
                        <div class="invalid-feedback">
                            请输入30-60之间的数值
                        </div>
                    </div>
                </div>

                <!-- 状态 -->
                <div class="mb-3">
                    <label for="id_status" class="form-label">状态</label>
                    {{ form.status }}
                    {% for error in form.status.errors %}
                        <div class="invalid-feedback d-block">
                            {{ error }}
                        </div>
                    {% endfor %}
                    <div class="invalid-feedback">
                        请选择车辆状态
                    </div>
                </div>

                <!-- 提交按钮 -->
                <div class="d-flex justify-content-end mt-4">
                    <button type="submit" class="btn btn-success me-2">
                        <i class="fas fa-save me-2"></i>保存车辆
                    </button>
                    <a href="{% url 'bus_list' %}" class="btn btn-secondary">
                        <i class="fas fa-times me-2"></i>取消
                    </a>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Bootstrap 表单验证脚本 -->
<script>
(function () {
  'use strict'

  var forms = document.querySelectorAll('.needs-validation')

  Array.prototype.slice.call(forms)
    .forEach(function (form) {
      form.addEventListener('submit', function (event) {
        if (!form.checkValidity()) {
          event.preventDefault()
          event.stopPropagation()
        }

        form.classList.add('was-validated')
      }, false)
    })
})()
</script>

{% endblock %}
